<extend name="zh_tw:Public:base" />
<block name="title">
    <title>美住 - 記賬概覽</title>
</block>
<block name="extendHead">
    <link rel="stylesheet" type="text/css" href="/Public/dist/Home/common_control.css?rev=65393a524028c7e3b76e961a08059c7d">
    <link rel="stylesheet" type="text/css" media="all" href="__PUBLIC__/jslib/bootstrap-daterangepicker/daterangepicker.css" />
    <link rel="stylesheet" type="text/css" media="all" href="__PUBLIC__/jslib/datepicker/css/foundation-datepicker.css" />
    <link rel="stylesheet" type="text/css" href="/Public/dist/Home/ReportPage/common.css?rev=93c8af7edfcfa9b852672c525380fc4d">
</block>
<block name="document">
    <div id="doc" class="container-above-md">
        <include file="zh_tw:Public:Include_control_navbar" navbar-menu-statistic="active" />
        <div id="doc-body" class="row">
            <include file="zh_tw:Public:Include_report_menu" doc-side-accountview="active" />
            <div id="doc-center">
                <include file="zh_tw:Public:Include_report_header" title="記賬概覽" />
                <div class="content-panel" id="statisticOverview">
                    <div class="content-panel-header">
                        <div class="content-panel-title">收支總覽</div>
                    </div>
                    <div class="content-panel-body content-panel-body-without-padding">
                        <include file="zh_tw:Public:Include_content_loading" loading-container-id="" loading-title="hidden" />
                        <div class="row text-sm border-box-horizontal-container">
                            <div class="col-xs-4 col-without-padding border-box-horizontal vertical-middle-block">
                                <div class="vertical-middle-block-cell">總結余：{$hotelDefaultSymbol}<span class="text-primary typo-display-1"><span data-tag="surplus">0</span></span>
                                </div>
                            </div>
                            <div class="col-xs-4 col-without-padding border-box-horizontal vertical-middle-block">
                                <div class="vertical-middle-block-cell">
                                    <div>收入：{$hotelDefaultSymbol}<span class="text-primary typo-display-1"><span data-tag="income">0</span></span></div>
                                </div>
                            </div>
                            <div class="col-xs-4 col-without-padding border-box-horizontal vertical-middle-block">
                                <div class="vertical-middle-block-cell">
                                    <div>支出：{$hotelDefaultSymbol}<span class="text-accent typo-display-1"><span data-tag="outcome">0</span></span></div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="content-panel" id="orderInfoContaienr">
                    <div class="content-panel-header">
                        <div class="content-panel-title">收支明細</div>
                    </div>
                    <div class="content-panel-header project">
                        <div class="content-panel-project">
                            <div class="project-list active" data-value = '1'>收入明細</div>
                            <div class="project-list" data-value = '2'>支出明細</div>
                        </div>
                        <div class="content-panel-operation">
                            <a class="btn-link"  href="/Home/Report/exportPay?hotel={$currentHotel}&start={$startDate}&end={$endDate}">導出表格</a>
                        </div>
                    </div>
                    <div class="content-panel-body content-panel-body-vertical-padding">
                        <include file="zh_tw:Public:Include_content_loading" loading-container-id="" loading-title="hidden" />
                        <table class="table content-panel-table">
                            <thead>
                                <tr>
                                    <th>項目</th>
                                    <th>日期</th>
                                    <th>金額</th>
                                    <th>支付方式</th>
                                    <th>備註</th>
                                    <th>操作人</th>
                                    <th>操作</th>
                                </tr>
                            </thead>
                            <tbody id="orderInfoTbody">
                            </tbody>
                        </table>
                    </div>
                    <div class="content-panel-footer">
                        <div class="pull-right">
                            <ul class='pagination pagination-sm'></ul>
                        </div>
                        <div class="pull-right content-panel-pagination-info">
                            共有&nbsp;<span class="text-accent content-panel-pagination-count">0</span>&nbsp;條記錄
                        </div>
                    </div>
                </div>
            </div>
            <!--end of doc-center-->
        </div>
        <!--end of doc body-->
    </div>
    <!--end of doc-->
    <script type="text/html" id="templateOrderPayRecord">
        <tr>
            <td class="col-xs-1">
                <div data-tag="name"></div>
            </td>
            <td class="col-xs-1" data-tag="date"></td>
            <td class="col-xs-1">
                <div data-tag="total"></div>
            </td>
            <td class="col-xs-1">
                <div data-tag="by"></div>
            </td>
            <td class="col-xs-1">
                <div data-tag="remark"></div>
            </td>
            <td class="col-xs-1">
                <div data-tag="operation"></div>
            </td>
            <td class="col-xs-1">
                <div data-tag="operate" class="btn-link booksRecordEdit" data-toggle="modal" data-target="#booksModal" style="margin-right: 10px;">修改</div>
                <div data-tag="operate" class="btn-link booksRecordDel" data-toggle="modal" data-target="#deleteModal">刪除</div>
            </td>
        </tr>
    </script>
    <div class="modal fade" data-backdrop="static" id="deleteModal">
        <div class="modal-dialog modal-confirm">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="btn close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                    <div class="modal-title">刪除記錄</div>
                </div>
                <div class="modal-body">您確定要刪除記錄嗎？
                </div>
                <div class="modal-footer">
                    <div class="form-horizontal form-sm">
                        <div class="form-group">
                            <div class="col-xs-10 col-xs-offset-2">
                                <div class="help-block inline-help-block inline-help-block-right"></div>
                                <button type="button" class="btn-sm btn-primary btn-raised" id="submitBooksDelete">確定</button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="modal" data-backdrop="static" id="booksModal">
        <div class="modal-dialog " >
            <div class="modal-content">
                <div class="modal-header modal-header-member">
                    <button type="button" class="btn close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                    <div class="modal-title">記壹筆</div>
                </div>
                <div class="modal-body"> 
                    <form class="form-horizontal form-sm" id="container-books-info">
                        <div class="form-group">
                            <label class="control-label">金額</label>
                            <div class="col-xs-9">
                                <input type="text" id="booksPrice" placeholder="請輸入金額" class="form-control">
                            </div>
                            <div class="col-xs-2">
                                <div class="help-block"></div>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="control-label">日期</label>
                            <div class="col-xs-9">
                                <input type="text" class="form-control"  id="booksTime" autocomplete="off"  placeholder="" value="">
                            </div>
                            <div class="col-xs-2">
                                <div class="help-block"></div>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="control-label">項目</label>
                            <div class="col-xs-9 income-project">
                                <div class="dropdown">
                                    <ul class="dropdown-menu dropdown-menu-left booksProjectTypeMenu" >
                                        <volist name="noteInCome" id="note">
                                            <if condition="$i eq 1">
                                                <li class="active" data-value="{$note.id}"><a href="javascript:void(0);">{$note.name}</a></li>
                                                <else/>
                                                <li data-value="{$note.id}"><a href="javascript:void(0);">{$note.name}</a></li>
                                            </if>
                                        </volist>
                                    </ul>
                                    <a data-toggle="dropdown" class="without-min-width btn text-sm booksProjectType" data-value="{$noteInCome[0]['id']}" href="javascript:void(0);"><span class="info">{$noteInCome[0]['name']}</span></a>
                                </div>  
                            </div>
                            <div class="col-xs-9 expend-project hidden">
                                <div class="dropdown">
                                    <ul class="dropdown-menu dropdown-menu-left booksProjectTypeMenu" >
                                        <volist name="noteOutCome" id="note">
                                            <if condition="$i eq 1">
                                                <li class="active" data-value="{$note.id}"><a href="javascript:void(0);">{$note.name}</a></li>
                                                <else/>
                                                <li data-value="{$note.id}"><a href="javascript:void(0);">{$note.name}</a></li>
                                            </if>
                                        </volist>
                                    </ul>
                                    <a data-toggle="dropdown" class="without-min-width btn text-sm booksProjectType" data-value="{$noteOutCome[0]['id']}" href="javascript:void(0);"><span class="info">{$noteOutCome[0]['name']}</span></a>
                                </div>  
                            </div>
                            <div class="col-xs-2">
                                <div class="help-block"></div>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="control-label">支付方式</label>
                            <div class="col-xs-9 booksReceiveType-us">
                                <div class="dropdown">
                                    <ul class="dropdown-menu dropdown-menu-left booksReceiveTypeMenu" >
                                        <volist name="noCardhotelPayData" id="pay">
                                            <if condition="$i eq 1">
                                                <li class="active" data-value="{$pay.id}"><a href="javascript:void(0);">{$pay.name}</a></li>
                                                <else/>
                                                <li data-value="{$pay.id}"><a href="javascript:void(0);">{$pay.name}</a></li>
                                            </if>
                                        </volist>
                                    </ul>
                                    <a data-toggle="dropdown" id="booksReceiveType" class="without-min-width btn text-sm " data-value="{$hotelpay[0]['id']}" href="javascript:void(0);"><span class="info">{$hotelpay[0]['name']}</span></a>
                                </div>   
                            </div>
                            <div class="col-xs-2">
                                <div class="help-block"></div>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="control-label">備註</label>
                            <div class="col-xs-9">
                                <textarea id="booksRemark"  maxlength="100" class="form-control"></textarea>
                            </div>
                            <div class="col-xs-2">
                                <div class="help-block"></div>
                            </div>
                        </div>
                    </form>
                    <div class="form-horizontal form-sm">
                        <div class="form-group">
                            <div class="help-block" style="height: 28px;line-height: 28px;"></div>
                            <div id="confirmBooksInfo">保存</div>
                            <div style="clear: both;"></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>    
</block>
<block name="extendFootJs">
    <script type="text/javascript" src="/Public/dist/Home/common_control.js?rev=b0ccaee5f3f00af011a31069395d22ed"></script>
    <script type="text/javascript" src="__PUBLIC__/jslib/moment.js/2.9.0/moment.min.js"></script>
    <script type="text/javascript" src="__PUBLIC__/jslib/bootstrap-daterangepicker/daterangepicker.js"></script>
    <script type="text/javascript" src="__PUBLIC__/jslib/interact.js/1.2.6/interact.min.js"></script>
    <script type="text/javascript" src="__PUBLIC__/jslib/datepicker/js/foundation-datepicker.js"></script>
    <script type="text/javascript" src="__PUBLIC__/jslib/highcharts/4.2.1/highcharts.js"></script>
    <script type="text/javascript" src="/Public/dist/Home/ReportPage/account.js?rev=93ea51f9990e8012d6b5bf3f9420252d"></script>
</block>
